<template>
  <basic-container>
    <div id="userManagement">
      <h3>用户扫码管理</h3>
      <el-select
        style="margin-bottom: 15px"
        v-model="shopnamevalue"
        filterable
        clearable
        @change="storeaccess"
        placeholder="请选择店铺名称"
      >
        <el-option
          v-for="item in shopname"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      ><br />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-download"
        @click="openSelExcel(1)"
        >导出选中</el-button
      >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-download"
        @click="openSelExcel(2)"
        >导出表格</el-button
      >
      <avue-crud
        ref="crud"
        :option="option"
        :data="data"
        :page="page"
        @on-load="onLoad"
        @selection-change="selectionChange"
      >
      </avue-crud>
    </div>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import $ from "jquery";
// let baseUrl = "http://192.168.0.220:8091";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址

export default {
  data() {
    return {
      data: [],
      page: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 50,
      },
      option: {
        emptyText: "请先选择店铺名称",
        addBtn: false,
        menu: false,
        selection: true,
        align: "center",
        menuAlign: "center",
        dialogClickModal:false,
        column: [
          {
            label: "序号",
            prop: "id",
          },
          {
            label: "用户昵称",
            prop: "openId",
          },
          {
            label: "店铺名称",
            prop: "shopName",
          },
          {
            label: "房间号",
            prop: "roomNumber",
          },
          {
            label: "所属区域",
            prop: "location",
          },
          {
            label: "酒店地理位置",
            prop: "detailedAddress",
          },
          {
            label: "扫码时间",
            prop: "created_on",
          },
          {
            label: "备注",
            type: "textarea",
            prop: "remark",
          },
        ],
      },
      shopname: [], //店铺名称下拉框
      shopnamevalue: "", //店铺名称选中数据
      tableSelectList: [], // 选中的数据
      tableLabelList: [], //导出表格的表头
      tablePropList: [], //导出表格的行关联信息
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    // this.getDataList();
    this.shop();
    // this.keeper();
  },
  methods: {
    onLoad(page) {
      this.page.pageNum = page.currentPage;
      this.storeaccess();
    },
    rowCell(row, index) {
      this.$refs.crud.rowCell(row, index);
    },
    rowUpdate(form, index, done) {
      this.$message.success(
        "编辑数据" + JSON.stringify(form) + "数据序号" + index
      );
      done();
    },
    handleRowClick(row) {
      this.$message({
        showClose: true,
        message: "序号" + row.$index,
        type: "success",
      });
    },
    // 选中数据
    selectionChange(list) {
      this.tableSelectList = [];
      this.tableSelectList = list;
    },
    // 获取店铺名称
    shop() {
      this.userInfo.userInfo.roles[0].shops.forEach((item) => {
        this.shopname.push({
          value: item.shopId,
          label: item.name,
        });
      });
      // let _this = this;
      // _this.$ajax
      //   .post(`${baseUrl}/pc/getShopList`)
      //   .then(function (res) {
      //     //请求成功
      //     let resData = res.data;
      //     if (resData.code == 200) {
      //       resData.data.forEach((item) => {
      //         _this.shopname.push({
      //           value: item.shopId,
      //           label: item.name,
      //         });
      //       });
      //     } else {
      //       _this.$message.error(resData.msg);
      //     }
      //   })
      //   .catch(function (error) {
      //     //请求失败
      //     console.log(error);
      //   });
    },
    //导出按钮
    openSelExcel(st) {
      let _this = this;
      if (st == 1) {
        if (_this.tableSelectList.length === 0) {
          _this.$message({
            message: "请至少选择一条需要导出的数据",
            type: "warning",
          });
          return;
        }
        _this
          .$confirm("该操作将导出选中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出
            _this.$export.excel({
              title: "提现信息",
              columns: [
                { label: "序号", prop: "id" },
                { label: "用户昵称", prop: "openId" },
                { label: "店铺名称", prop: "shopName" },
                { label: "房间号", prop: "roomNumber" },
                { label: "所属区域", prop: "location" },
                { label: "酒店地理位置", prop: "detailedAddress" },
                { label: "扫码时间", prop: "created_on" },
              ],
              data: _this.tableSelectList,
            });
          })
          .catch(() => {});
      } else {
        _this
          .$confirm("该操作将导出表格中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出
            if (_this.data.length === 0) {
              _this.$message({
                message: "请选择店铺名称获取数据",
                type: "warning",
              });
            } else {
              _this.$export.excel({
                title: "提现信息",
                columns: [
                  { label: "序号", prop: "id" },
                  { label: "用户昵称", prop: "openId" },
                  { label: "店铺名称", prop: "shopName" },
                  { label: "房间号", prop: "roomNumber" },
                  { label: "所属区域", prop: "location" },
                  { label: "酒店地理位置", prop: "detailedAddress" },
                  { label: "扫码时间", prop: "created_on" },
                ],
                data: _this.data,
              });
            }
          })
          .catch(() => {});
      }
    },
    // 下拉框点击
    storeaccess() {
      let _this = this;
      // console.log(_this);
      // _this.$ajax
      //   .post(`${baseUrl}/pc/getShopScanRecord`, {
      //     shopId: _this.shopnamevalue,
      //     pageNum: _this.page.pageNum,
      //     pageSize: _this.page.pageSize,
      //   },{headers:{
      //       Authorization: "Bearer " + this.$cookies("token")
      //     }})
      //   .then(function (res) {
      //     //请求成功
      //     let resData = res.data;
      //     console.log(res.data);
      //     if (resData.code == 200) {
      //       _this.page.total = resData.data.count;
      //       $(".avue-crud__pagination").css("display", "block");
      //       _this.data = resData.data.shopScanRecordList;
      //     } else {
      //       _this.data = [];
      //       $(".avue-crud__pagination").css("display", "none");
      //       _this.$message.error(resData.msg);
      //     }
      //   })
      //   .catch(function (error) {
      //     //请求失败
      //     console.log(error);
      //   });
      console.log(1);
      _this.$ajax
        .post(`${baseUrl}/pc/getShopScanRecord`, {
          // headers: {
          //   "Content-Type": "application/json;charset=utf-8",
          //   "Access-Control-Allow-Credentials": "true", //1
          // },
          // withCredentials: true, //2
          shopId: _this.shopnamevalue,
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          console.log(res.data);
          if (resData.code == 200) {
            _this.page.total = resData.data.count;
            $(".avue-crud__pagination").css("display", "block");
            _this.data = resData.data.shopScanRecordList;
          } else {
            _this.data = [];
            $(".avue-crud__pagination").css("display", "none");
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
  },
};
</script>

<style>
#userManagement h3 {
  margin: 20px 0;
  /* display: block; */
}
</style>